<template>
  <div class="quill-test-container">
    <h2>Quill编辑器测试页面</h2>
    
    <!-- 显示当前内容 -->
    <div class="content-display">
      <h3>当前内容（原始HTML）：</h3>
      <pre>{{ content }}</pre>
    </div>
    
    <!-- 显示VueQuill组件状态 -->
    <div class="quill-status">
      <h3>编辑器状态：</h3>
      <p>内容长度: {{ content.length }}</p>
      <p>是否为空: {{ content.trim() === '' }}</p>
      <p>Quill实例状态: {{ quillStatus }}</p>
    </div>
    
    <!-- 简化的VueQuill编辑器 -->
    <div class="editor-container">
      <h3>编辑器：</h3>
      <QuillEditor
        ref="quillEditor"
        v-model:content="content"
        :options="editorOptions"
        content-type="html"
        @textChange="handleTextChange"
        @ready="handleReady"
        style="height: 300px; border: 2px solid #ccc;"
      />
    </div>
    
    <!-- 操作按钮 -->
    <div class="actions">
      <el-button @click="setTestContent">设置测试内容</el-button>
      <el-button @click="clearContent">清空内容</el-button>
      <el-button @click="checkQuillInstance">检查Quill实例</el-button>
      <el-button @click="forceUpdate">强制更新</el-button>
    </div>
    
    <!-- 调试信息 -->
    <div class="debug-info">
      <h3>调试信息：</h3>
      <div v-for="(log, index) in debugLogs" :key="index" class="debug-log">
        {{ log }}
      </div>
    </div>
  </div>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

export default {
  name: 'QuillEditorTest',
  components: {
    QuillEditor
  },
  data() {
    return {
      content: '',
      quillStatus: '未初始化',
      debugLogs: [],
      editorOptions: {
        theme: 'snow',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            ['clean']
          ]
        },
        placeholder: '请输入内容...'
      }
    }
  },
  methods: {
    /**
     * 处理文本变化事件
     */
    handleTextChange() {
      this.addDebugLog('文本变化事件触发，当前内容: ' + this.content)
    },
    
    /**
     * 处理编辑器准备就绪事件
     */
    handleReady() {
      this.quillStatus = '已准备就绪'
      this.addDebugLog('Quill编辑器已准备就绪')
      this.checkQuillInstance()
    },
    
    /**
     * 设置测试内容
     */
    setTestContent() {
      this.content = '<p>这是测试内容</p><p>第二段内容</p>'
      this.addDebugLog('设置测试内容: ' + this.content)
    },
    
    /**
     * 清空内容
     */
    clearContent() {
      this.content = ''
      this.addDebugLog('内容已清空')
    },
    
    /**
     * 检查Quill实例
     */
    checkQuillInstance() {
      try {
        if (this.$refs.quillEditor && this.$refs.quillEditor.getQuill) {
          const quill = this.$refs.quillEditor.getQuill()
          if (quill) {
            this.quillStatus = '实例正常'
            this.addDebugLog('Quill实例检查: 正常')
            this.addDebugLog('Quill根元素HTML: ' + quill.root.innerHTML)
            this.addDebugLog('Quill文本内容: ' + quill.getText())
          } else {
            this.quillStatus = '实例为空'
            this.addDebugLog('Quill实例检查: 实例为空')
          }
        } else {
          this.quillStatus = '无法获取实例'
          this.addDebugLog('Quill实例检查: 无法获取实例')
        }
      } catch (error) {
        this.quillStatus = '检查出错: ' + error.message
        this.addDebugLog('Quill实例检查出错: ' + error.message)
      }
    },
    
    /**
     * 强制更新
     */
    forceUpdate() {
      this.$forceUpdate()
      this.addDebugLog('强制更新组件')
    },
    
    /**
     * 添加调试日志
     */
    addDebugLog(message) {
      const timestamp = new Date().toLocaleTimeString()
      this.debugLogs.unshift(`[${timestamp}] ${message}`)
      // 只保留最近20条日志
      if (this.debugLogs.length > 20) {
        this.debugLogs = this.debugLogs.slice(0, 20)
      }
    }
  },
  
  mounted() {
    this.addDebugLog('组件已挂载')
    // 延迟检查Quill实例
    setTimeout(() => {
      this.checkQuillInstance()
    }, 1000)
  }
}
</script>

<style scoped>
.quill-test-container {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.content-display, .quill-status, .editor-container, .actions, .debug-info {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.content-display pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-all;
}

.actions {
  text-align: center;
}

.actions .el-button {
  margin: 0 5px;
}

.debug-info {
  max-height: 300px;
  overflow-y: auto;
}

.debug-log {
  font-family: monospace;
  font-size: 12px;
  padding: 2px 0;
  border-bottom: 1px solid #eee;
}

.debug-log:last-child {
  border-bottom: none;
}
</style>